<template>
  <div class="form-definition-field-properties">
    <a-button icon="save" @click="save">保存</a-button>
    <component :config="field" v-if="field && fieldRegistry[field.comp]" :is="fieldRegistry[field.comp].config"/>
  </div>
</template>
<script>
import {createProps} from "@/utils";
import fieldRegistry from "@/components/form/FieldRegistry";
import {createFormDefinition, parseFormDefinitionViews} from "@/components/form/type";

export default {
  name: 'FormDefinitionFieldProperties',
  props: {
    field: createProps(Object, () => undefined),
    formDefinition: createProps(Object, createFormDefinition)
  },
  data() {
    return {
      fieldRegistry,
    }
  },
  methods: {
    print() {
      console.log(JSON.stringify(this.formDefinition));
    },
    save() {
      this.$emit("beforeSave");
      this.$nextTick(() => {
        parseFormDefinitionViews(this.formDefinition)
        this.$nextTick(() => {
          this.print()
        })
      })
    },
  }
};
</script>
<style>
.form-definition-field-properties {
  width: 250px;
  border-left: 1px solid #c4c4c4;
  height: 100%;
  overflow: auto;
}
</style>